<template>
  <div class="container-register">
    <div class="container-header">
      <el-page-header @back="goBack" content="注册页面" title="返回登录"></el-page-header>
    </div>
    <div class="container-box">
      <div class="container-box-case">
        <div class="container-box-left"></div>
        <div class="container-box-right">
          <div class="container-box-inside">

            <el-form ref="register_ref" :model="registers" :rules="rules" :show-message="false" :hide-required-asterisk="true" label-width="30%">

              <el-form-item prop="code" label="企业编号">
                <el-input v-model="registers.code" :autofocus="true"></el-input>
              </el-form-item>

              <el-form-item prop="username" label="账号">
                <el-input v-model="registers.username"></el-input>
              </el-form-item>

              <el-form-item prop="pawOne" label="密码">
                <el-input v-model="registers.pawOne" :show-password="true"></el-input>
              </el-form-item>

              <el-form-item prop="pawTwo" label="再输入密码">
                <el-input  v-model="registers.pawTwo" :show-password="true"></el-input>
              </el-form-item>

              <el-form-item  prop="phone" label="手机号"  v-if="timer">
                <el-input v-model="registers.phone" style="float:left;width:60%"></el-input>
                <el-link href="#" @click.native="triggerTimer"  style="float:left">验证码</el-link>
              </el-form-item>

              <el-form-item  prop="verificationCode" label="验证码"  v-else>
                <el-input v-model="registers.verificationCode" style="float:left;width:60%"></el-input>
                <el-link disabled style="float:left;color:#606266"> {{time}}</el-link>
              </el-form-item>

              <el-form-item>
                <div class="container-box-btn">
                  <el-button @click="registerBtn">注册</el-button>
                  <el-button @click="goBack">取消</el-button>
                </div>
              </el-form-item>
            </el-form>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getVerificationCode} from "@/api/common";
import {logon} from "@/api/user";

export default {
  data(){
    return{
      registers:{},
      timer:true,
      time:60,
      rules:{
        code:[
          { required: true, message: '请选择编号', trigger: 'blur' },
        ],
        username:[
          { required: true, message: '请选择用户', trigger: 'blur' },
        ],
        pawOne:[
          { required: true, message: '请选择密码', trigger: 'blur' },
        ],
        pawTwo:[
          { required: true, message: '再次输入密码', trigger: 'blur' },
        ],
        phone:[
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}
        ],
        verificationCode:[
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '长度在必须6个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    registerBtn(){
      this.$refs.register_ref.validate((valid) => {
        if (valid) {
          this.enrolled()
        } else {
          this.$message({
            message: '数据校验未通过',
            type: 'warning'
          });
          return false;
        }
      })
    },
    async enrolled(){
      const res = await logon(this.registers)
      if(res.code === 200){
        this.$message({
          message: res.message,
          type: 'success'
        });
      }else {
        this.$message.error(res.message);
      }
      this.$router.push({path:'/login'})
    },

    goBack(){
      this.$router.go(-1)
    },
    async triggerTimer(){
     await getVerificationCode(this.registers)
     this.timer = false
     this.loading()
      const timers = setInterval(()=>{
        if (this.time === 0){
          clearTimeout(timers)
          this.time  = 60
          this.timer = true
        }else {
          this.loading()
        }
      },1000)
    },
    loading(){
      this.time--
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  &-register{
    position: absolute;
    width:100%;
    height: 100%;
    background-color:#c6c8cb;
  }
  &-header{
    position: relative;
  }
  &-box{
    position: relative;
    margin:4% 20% 0 20%;
    &-case{
      width:100%;
      height:700px;
      position: relative;
      border:10px outset #686868;
    }
    &-left{
      float: left;
      width:50%;
      height:700px;
      background: url("https://edu-10yh.oss-cn-hangzhou.aliyuncs.com/images/login/preview.jpg") no-repeat;
      background-size:100% 100%;
    }
    &-right{
      float: left;
      width:50%;
      height:700px;
      background-color: #483131
    }
    &-inside{
      margin:170px 12% 0 12%
    }
    &-btn{
      margin:1% 10% 0 10%
    }
    &-a{

    }
  }
}
.el-page-header{
  height:50px;
  line-height:50px;
  color:#928275 ;
  background-color: #100C2A;
  padding-left: 20px;
}


</style>

<style  scoped>
::v-deep .el-page-header__content{
  font-size:15px;
  color:#858585
}
::v-deep .el-form-item__label{
  color:#a0a8ab;
}
::v-deep .el-input__inner{
  background-color:#ebd9d9;
  border:3px solid #DCDFE6;
  border-radius:12px;
  width:80%;
}
::v-deep .el-button {
  border-radius:12px;
  border:2px solid #DCDFE6
}

</style>
